<template>
	<view class="integral">
		<view class="header" :class="'bg-' + themeColor.name">
			<view class="title">步数</view>
			<text class="num">
				{{
					cstmGps.setpNum ||
						'--'
				}}
			</text>
			<view class="line"> </view>
			<view class="nav">
				<view class="item">
					<text class="num">
						{{
							cstmGps.heartRate ||
								'--'
						}}
					</text>
					<text class="title">心率</text>
				</view>
				<view class="item">
					<text class="num">
						{{
							cstmGps.battery || '--'
						}}
					</text>
					<text class="title">电量</text>
				</view>
				<view class="item">
					<text class="num">
						{{
							cstmGps.pressureLow ||
								'--'
						}}/{{cstmGps.pressureHigh ||
								'--'}}
					</text>
					<text class="title">血压</text>
				</view>
			</view>

		</view>
		
		<uni-grid :column="3" :square="false" :highlight="false" @change="navTo">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index" >
				<view class="grid-item-box">
					<uni-icons :type="item.name" color="#8f8f94" size="30" />						
					<text class="text">{{ item.text }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>			

		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>
<script>
/**
 * @des 积分中心
 *
 * @author stav stavyan@qq.com
 * @date 2020-01-10 15:24
 * @copyright 2019
 */
import { getCstmGps } from '@/api/userInfo';
import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';

import moment from '@/common/moment';
export default {
	name: 'Integral',
	components: {
		rfLoadMore
	},
	data() {
		return {
			navList: [{ name: '分值明细' }, { name: '分值提升' }],
			current: 0,
			integralList: [],
			loadingType: 'more',
			page: 1,
			userInfo: {},
			loading: true,
			list:[
				{name:'navigate',text:'轨迹'},
				{name:'map',text:'围栏'},
				{name:'map-pin-ellipse',text:'定位'},
				{name:'navigate',text:'详情'},
				{name:'phone',text:'通话'},
				{name:'gear',text:'设置'},
				{name:'map',text:'图表'}			
				],
			cstmGps : {}				
		};
	},
	onLoad(option) {
		this.cstmId = option.id;
		this.initData();
	},
	filters: {
		time(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
		},
		numFilter(val) {
			return val >= 0 ? `+${val.toString()}` : val;
		}
	},
	// 加载更多
	onReachBottom() {
  if (this.loadingType === 'nomore') return;
		this.page++;
		this.getIntegralListList();
	},
	methods: {		
		toCategory() {
			this.$mRouter.reLaunch({ route: '/pages/category/category' });
		},
		nav(index) {
			this.loading = true;
			this.current = index;
			this.page = 1;
			this.integralList.length = 0;
			this.getIntegralListList();
		},
		initData() {
			this.userInfo = uni.getStorageSync('userInfo') || undefined;
			this.getIntegralListList();
			setInterval(() =>{
				this.getIntegralListList();
			},10*1000)
		},
		async getIntegralListList() {
			var params = {
                        userId : this.userInfo && this.userInfo.userId,
                        corpId : this.userInfo && this.userInfo.corpId,
                        cstmId : this.cstmId
                    }
			await this.$http
				.get(`${getCstmGps}`, params)
				.then(r => {
					console.log("r.data: " + JSON.stringify(r.data));
					this.loading = false;
					this.cstmGps = r.data;
				})
				.catch(() => {
					this.loading = false;
				});
		},
		navTo(e){
             //console.log("e.detail.index: " + e.detail.index);			
             if(e.detail.index === 4){
				 this.callTel();
			 }else if(e.detail.index ===5){
				 this.$mRouter.push({
				   route : `/pages/zhyl/device/watch/set?id=${this.cstmId}`
				 });	
			 }else if(e.detail.index ===3){
				 this.$mRouter.push({
				   route : `/pages/zhyl/device/watch/detail?id=${this.cstmId}`
				 });	
			 }else if(e.detail.index ===6){
				 this.$mRouter.push({
				   route : `/pages/zhyl/device/watch/watchChart?id=${this.cstmId}`
				 });	
			 }else{
				 console.log("e.detail.index: " +e.detail.index );
				let type = this.list[e.detail.index].text;
				console.log("type: " + type);
				this.$mRouter.push({
				  route : `/pages/zhyl/device/watch/map?id=${this.cstmId}&type=${type}`
			    });				 
			 }
		
		},
		callTel(){
			 if(this.cstmGps.terminalNumber){
				uni.makePhoneCall({
					phoneNumber: this.cstmGps.terminalNumber 
				});			 
			 }else{
			   this.$mHelper.toast('设备手机号码未设置!');
				 
			 }
				  
		}		
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: $color-white;
}
	.grid-item-box {
		flex: 1;
		/* position: relative;
 */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

.integral {
	background-color: $color-white;
	/*  #ifndef H5  */
	height: 100vh;
	/*  #endif  */
	.header {
		opacity: 0.9;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 320upx;
		font-size: $font-base;
		color: #fff;
		padding: 20upx 0;
		text-align: center;
		position: relative;
		.title {
			font-size: $font-sm;
			margin: 10upx 0;
		}
		.num {
			/*<!--color: $base-color;-->*/
			font-size: $font-lg + 20upx;
			font-weight: lighter;
			line-height: 1;
		}
		.line {
			width: 10%;
			height: 3upx;
			background-color: #fff;
			margin: 20upx auto 30upx;
		}
		.nav {
			width: 100%;
			display: flex;
			.item {
				flex: 1;
				.num {
					font-size: $font-lg + 4upx;
					display: block;
					line-height: 1;
				}
			}
		}
	}
}
.wrapper .list1 {
	background-color: #fff;
	.tip {
		font-size: $font-sm;
		width: 90%;
		margin: $spacing-base 5%;
		height: 64upx;
		line-height: 64upx;
		border-radius: 30upx;
		background-color: #fff5e2;
		border: 1px solid #ffeac1;
		color: #c8a86b;
		text-align: center;
	}
	.list {
		display: flex;
		align-items: center;
		padding: 20upx 36upx;
		background: #fff;
		position: relative;
		.wrapper {
			display: flex;
			flex-direction: column;
			flex: 1;
			.address-box {
				display: flex;
				align-items: center;
				font-size: $font-base;
				color: $font-color-dark;
			}
			.u-box {
				color: $font-color-light;
				font-size: $font-sm;
			}
		}
		.change-num {
			font-size: $font-lg + 4upx;
			color: $font-color-base;
		}
		.change-num-add {
			color: #16ac57;
		}
		.change-num-reduce {
			color: $base-color;
		}
	}
}
.wrapper .list2 {
	/*background-color: #F76260;*/
}
.wrapper .list2 .item {
	background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
	width: 90%;
	margin: $spacing-base 5%;
	height: 120upx;
	line-height: 120upx;
	position: relative;
	border-radius: 20upx;
	padding: 0 20upx;
	display: flex;
}
.wrapper .list2 .item .pictrue {
	width: 60upx;
	height: 100upx;
	margin: 20upx 0;
	image {
		width: 80%;
		height: 80%;
	}
}
.wrapper .list2 .item .name {
	flex: 1;
	font-size: $font-sm;
	font-weight: bold;
	color: #c8a86b;
	margin: 0 20upx;
}
.wrapper .list2 .item .earn {
	font-size: $font-sm;
	color: #c8a86b;
	border: 2upx solid #c8a86b;
	text-align: center;
	height: 48upx;
	margin: 36upx 0;
	width: 120upx;
	border-radius: 10upx;
}
</style>
